<link href="./assets/plugins/bootstrap-markdown/bootstrap-markdown.min.css" rel="stylesheet">
        
        <script src="./assets/plugins/bootstrap-markdown/bootstrap-markdown.min.js"></script>
        
<!--begin::Subheader-->
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
		<div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
			<!--begin::Info-->
			<div class="d-flex align-items-center flex-wrap mr-1">
				<!--begin::Mobile Toggle-->
				<button class="burger-icon burger-icon-left mr-4 d-inline-block d-lg-none" id="kt_subheader_mobile_toggle">
					<span></span>
				</button>
				<!--end::Mobile Toggle-->
				<!--begin::Page Heading-->
				<div class="d-flex align-items-baseline flex-wrap mr-5">
					<!--begin::Page Title-->
					<h5 class="text-dark font-weight-bold my-1 mr-5">Inbox</h5>
					<!--end::Page Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
						<li class="breadcrumb-item">
							<a href="" class="text-muted">Apps</a>
						</li>
						<li class="breadcrumb-item">
							<a href="" class="text-muted">Inbox</a>
						</li>
					</ul>
					<!--end::Breadcrumb-->
				</div>
				<!--end::Page Heading-->
			</div>
			<!--end::Info-->
		</div>
	</div>
	<!--end::Subheader-->
	<!--begin::Entry-->
	<div class="d-flex flex-column-fluid" >
		<!--begin::Container-->
		<div class="container">
			<!--begin::Inbox-->
			<div class="d-flex flex-row">
				<!--begin::Aside-->
				<div class="flex-row-auto offcanvas-mobile w-200px w-xxl-275px" id="kt_inbox_aside">
					<!--begin::Card-->
					<div class="card card-custom card-stretch">
						<!--begin::Body-->
						<div class="card-body px-5">
							<!--begin::Compose-->
							<div class="px-4 mt-4 mb-10">
								<a href="javascript:void(0);" class="btn btn-block btn-primary font-weight-bold text-uppercase py-4 px-6 text-center" ng-click="showDetail(-1)">New Message</a>
							</div>
							<!--end::Compose-->
							<!--begin::Navigations-->
							<div class="navi navi-hover navi-active navi-link-rounded navi-bold navi-icon-center navi-light-icon">
								<!--begin::Item-->
								<div class="navi-item my-2" ng-repeat="noteType in noteTypeList | filter : {status : '1'}">
									<a href="javascript:void(0);" class="navi-link " ng-class="{'active':$index==0}">
										<span class="navi-icon mr-4" ng-switch="$index">
											<span class="svg-icon svg-icon-lg" ng-switch-when="0">
												<!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-heart.svg-->
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<rect x="0" y="0" width="24" height="24" />
														<path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M13.8,4 C13.1562,4 12.4033,4.72985286 12,5.2 C11.5967,4.72985286 10.8438,4 10.2,4 C9.0604,4 8.4,4.88887193 8.4,6.02016349 C8.4,7.27338783 9.6,8.6 12,10 C14.4,8.6 15.6,7.3 15.6,6.1 C15.6,4.96870845 14.9396,4 13.8,4 Z" fill="#000000" opacity="0.3" />
														<path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000" />
													</g>
												</svg>
												<!--end::Svg Icon-->
											</span>
											<span class="svg-icon svg-icon-lg" ng-switch-when="1">
												<!--begin::Svg Icon | path:assets/media/svg/icons/General/Half-star.svg-->
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24" />
														<path d="M12,4.25932872 C12.1488635,4.25921584 12.3000368,4.29247316 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 L12,4.25932872 Z" fill="#000000" opacity="0.3" />
														<path d="M12,4.25932872 L12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.277344,4.464261 11.6315987,4.25960807 12,4.25932872 Z" fill="#000000" />
													</g>
												</svg>
												<!--end::Svg Icon-->
											</span>
											<span class="svg-icon svg-icon-lg" ng-switch-when="2">
                                                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/PenAndRuller.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24" />
                                                        <path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" />
                                                        <path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" />
                                                    </g>
                                                </svg>
                                                <!--end::Svg Icon-->
											</span>
											<span class="svg-icon svg-icon-lg" ng-switch-when="3">
                                                <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Sending.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24" />
                                                        <path d="M8,13.1668961 L20.4470385,11.9999863 L8,10.8330764 L8,5.77181995 C8,5.70108058 8.01501031,5.63114635 8.04403925,5.56663761 C8.15735832,5.31481744 8.45336217,5.20254012 8.70518234,5.31585919 L22.545552,11.5440255 C22.6569791,11.5941677 22.7461882,11.6833768 22.7963304,11.794804 C22.9096495,12.0466241 22.7973722,12.342628 22.545552,12.455947 L8.70518234,18.6841134 C8.64067359,18.7131423 8.57073936,18.7281526 8.5,18.7281526 C8.22385763,18.7281526 8,18.504295 8,18.2281526 L8,13.1668961 Z" fill="#000000" />
                                                        <path d="M4,16 L5,16 C5.55228475,16 6,16.4477153 6,17 C6,17.5522847 5.55228475,18 5,18 L4,18 C3.44771525,18 3,17.5522847 3,17 C3,16.4477153 3.44771525,16 4,16 Z M1,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L1,13 C0.44771525,13 6.76353751e-17,12.5522847 0,12 C-6.76353751e-17,11.4477153 0.44771525,11 1,11 Z M4,6 L5,6 C5.55228475,6 6,6.44771525 6,7 C6,7.55228475 5.55228475,8 5,8 L4,8 C3.44771525,8 3,7.55228475 3,7 C3,6.44771525 3.44771525,6 4,6 Z" fill="#000000" opacity="0.3" />
                                                    </g>
                                                </svg>
                                                <!--end::Svg Icon-->
											</span>
											<span class="svg-icon svg-icon-lg" ng-switch-when="4">
                                                <!--begin::Svg Icon | path:assets/media/svg/icons/General/Trash.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24" />
                                                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
                                                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
                                                    </g>
                                                </svg>
                                                <!--end::Svg Icon-->
											</span>
										</span>
										<span class="navi-text font-weight-bolder font-size-lg">{{noteType.title}}</span>
										<span class="navi-label hide">
											<span class="label label-rounded label-light-success font-weight-bolder">{{noteType.count}}</span>
										</span>
									</a>
								</div>
								<!--end::Item-->
								<!--begin::Separator-->
								<div class="navi-item my-10"></div>
								<!--end::Separator-->
								<!--begin::Item-->
								<div class="navi-item my-2">
									<a href="javascript:void(0);" class="navi-link">
										<span class="navi-icon mr-4">
											<i class="fa fa-genderless text-danger"></i>
										</span>
										<span class="navi-text">Custom Work</span>
										<span class="navi-label">
											<span class="label label-rounded label-light-danger font-weight-bolder">6</span>
										</span>
									</a>
								</div>
								<!--end::Item-->
								<!--begin::Item-->
								<div class="navi-item my-2">
									<a href="javascript:void(0);" class="navi-link">
										<span class="navi-icon mr-4">
											<i class="fa fa-genderless text-success"></i>
										</span>
										<span class="navi-text">Partnership</span>
									</a>
								</div>
								<!--end::Item-->
								<!--begin::Item-->
								<div class="navi-item my-2">
									<a href="javascript:void(0);" class="navi-link">
										<span class="navi-icon mr-4">
											<i class="fa fa-genderless text-info"></i>
										</span>
										<span class="navi-text">In Progres</span>
									</a>
								</div>
								<!--end::Item-->
								<!--begin::Item-->
								<div class="navi-item my-2">
									<a href="javascript:void(0);" class="navi-link">
										<span class="navi-icon mr-4">
											<i class="fa flaticon2-plus icon-1x"></i>
										</span>
										<span class="navi-text">Add Label</span>
									</a>
								</div>
								<!--end::Item-->
							</div>
							<!--end::Navigations-->
						</div>
						<!--end::Body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::Aside-->
				<!--begin::List-->
				<div class="flex-row-fluid ml-lg-8" id="kt_inbox_list" ng-class="{'d-none':detail.toggle, 'd-block':!detail.toggle}">
					<!--begin::Card-->
					<div class="card card-custom card-stretch">
						<!--begin::Header-->
						<div class="card-header row row-marginless align-items-center flex-wrap py-5 h-auto">
							<!--begin::Toolbar-->
							<div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-1 d-flex flex-wrap align-items-center">
								<div class="d-flex align-items-center mr-1 my-2">
									<label data-inbox="group-select" class="checkbox checkbox-inline checkbox-primary mr-3">
										<input type="checkbox" />
										<span class="symbol-label"></span>
									</label>
									<span class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="Reload list">
										<i class="flaticon-refresh icon-1x"></i>
									</span>
								</div>
								<div class="d-flex align-items-center mr-1 my-2">
									<span class="btn btn-default btn-icon btn-sm mr-2 d-none" data-toggle="tooltip" title="Spam">
										<span class="svg-icon svg-icon-md">
											<!--begin::Svg Icon | path:assets/media/svg/icons/Code/Warning-1-circle.svg-->
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24" />
													<circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10" />
													<rect fill="#000000" x="11" y="7" width="2" height="8" rx="1" />
													<rect fill="#000000" x="11" y="16" width="2" height="2" rx="1" />
												</g>
											</svg>
											<!--end::Svg Icon-->
										</span>
									</span>
									<span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Delete">
										<span class="svg-icon svg-icon-md">
											<!--begin::Svg Icon | path:assets/media/svg/icons/General/Trash.svg-->
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24" />
													<path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
													<path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
												</g>
											</svg>
											<!--end::Svg Icon-->
										</span>
									</span>
								</div>
							</div>
							<!--end::Toolbar-->
							<!--begin::Search-->
							<div class="col-xxl-3 d-flex order-1 order-xxl-2 align-items-center justify-content-center">
								<div class="input-group input-group-lg input-group-solid my-2">
									<input type="text" class="form-control pl-4" placeholder="Search..." />
									<div class="input-group-append">
										<span class="input-group-text pr-3">
											<span class="svg-icon svg-icon-lg">
												<!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<rect x="0" y="0" width="24" height="24" />
														<path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
														<path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
													</g>
												</svg>
												<!--end::Svg Icon-->
											</span>
										</span>
									</div>
								</div>
							</div>
							<!--end::Search-->
							<!--begin::Pagination-->
							<div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-3 d-flex align-items-center justify-content-sm-end text-right my-2">
								<!--begin::Per Page Dropdown-->
								<div class="d-flex align-items-center mr-2" data-toggle="tooltip" title="Records per page">
									<span class="text-muted font-weight-bold mr-2" data-toggle="dropdown">1 - 50 of 235</span>
									<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-sm">
										<ul class="navi py-3">
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-text">20 per page</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link active">
													<span class="navi-text">50 par page</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-text">100 per page</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<!--end::Per Page Dropdown-->
								<!--begin::Arrow Buttons-->
								<span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Previose page">
									<i class="flaticon2-back icon-sm"></i>
								</span>
								<span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Next page">
									<i class="flaticon2-next icon-sm"></i>
								</span>
								<!--end::Arrow Buttons-->
								<!--begin::Sort Dropdown-->
								<div class="dropdown mr-2" data-toggle="tooltip" title="Sort">
									<span class="btn btn-default btn-icon btn-sm" data-toggle="dropdown">
										<i class="flaticon2-console icon-1x"></i>
									</span>
									<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-sm">
										<ul class="navi py-3">
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link active">
													<span class="navi-text">Newest</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-text">Olders</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-text">Unread</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<!--end::Sort Dropdown-->
								<!--begin::Options Dropdown-->
								<div class="dropdown" data-toggle="tooltip" title="Settings">
									<span class="btn btn-default btn-icon btn-sm" data-toggle="dropdown">
										<i class="flaticon-cogwheel-2 icon-1x"></i>
									</span>
									<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-md">
										<!--begin::Navigation-->
										<ul class="navi navi-hover py-5">
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-drop"></i>
													</span>
													<span class="navi-text">New Group</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-rocket-1"></i>
													</span>
													<span class="navi-text">Groups</span>
													<span class="navi-link-badge">
														<span class="label label-light-primary label-inline font-weight-bold">new</span>
													</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-gear"></i>
													</span>
													<span class="navi-text">Settings</span>
												</a>
											</li>
										</ul>
										<!--end::Navigation-->
									</div>
								</div>
								<!--end::Options Dropdown-->
							</div>
							<!--end::Pagination-->
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body table-responsive px-0">
							<!--begin::Items-->
							<div class="list list-hover min-w-500px" data-inbox="list">
								<!--begin::Item-->
								<div class="d-flex align-items-start list-item card-spacer-x py-3" ng-repeat="note in noteList | filter : {status : '1'}">
									<!--begin::Toolbar-->
									<div class="d-flex align-items-center pt-3">
										<!--begin::Actions-->
										<div class="d-flex align-items-center mr-3" data-inbox="actions">
											<label class="checkbox checkbox-inline checkbox-primary flex-shrink-0 mr-3">
												<input type="checkbox" />
												<span></span>
											</label>
											<a href="javascript:void(0);" class="btn btn-icon btn-xs btn-hover-text-warning active" data-toggle="tooltip" data-placement="right" title="Star">
												<i class="flaticon-star text-muted"></i>
											</a>
											<a href="javascript:void(0);" class="btn btn-icon btn-xs text-hover-warning" data-toggle="tooltip" data-placement="right" title="Mark as important">
												<i class="flaticon-add-label-button text-muted"></i>
											</a>
										</div>
										<!--end::Actions-->
									</div>
									<!--end::Toolbar-->
									<!--begin::Info-->
									<div class="flex-grow-1 mt-2 mr-2" ng-click="showDetail($index)">
										<div>
											<span class="font-weight-bolder font-size-lg mr-2" ng-bind-html="note.title"></span>
											<span class="text-muted" ng-bind="note.message | cutString : 60"></span>
										</div>
										<div class="mt-2">
											<span class="label label-light-primary font-weight-bold label-inline mr-1">inbox</span>
											<span class="label label-light-danger font-weight-bold label-inline">task</span>
										</div>
									</div>
									<!--end::Info-->
									<!--begin::Datetime-->
									<div class="mt-2 mr-3 font-weight-bolder w-100px text-right" data-toggle="view">8:30 PM</div>
									<!--end::Datetime-->
								</div>
								<!--end::Item-->
							</div>
							<!--end::Items-->
						</div>
						<!--end::Body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::List-->
				<!--begin::View-->
				<div class="flex-row-fluid ml-lg-8 " id="kt_inbox_view" ng-class="{'d-none':!detail.toggle, 'd-block':detail.toggle}" ng-init="init()">
					<!--begin::Card-->
					<div class="card card-custom card-stretch">
						<!--begin::Header-->
						<div class="card-header align-items-center flex-wrap justify-content-between py-5 h-auto">
							<!--begin::Left-->
							<div class="d-flex align-items-center my-2">
								<a href="javascript:void(0);" class="btn btn-clean btn-icon btn-sm mr-6" ng-click="backListView()">
									<i class="flaticon2-left-arrow-1"></i>
								</a>
								<span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Delete">
									<span class="svg-icon svg-icon-md">
										<!--begin::Svg Icon | path:assets/media/svg/icons/General/Trash.svg-->
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
											<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
												<rect x="0" y="0" width="24" height="24" />
												<path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
												<path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
											</g>
										</svg>
										<!--end::Svg Icon-->
									</span>
								</span>
								<span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Move">
									<span class="svg-icon svg-icon-md">
										<!--begin::Svg Icon | path:assets/media/svg/icons/Files/Media-folder.svg-->
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
											<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
												<rect x="0" y="0" width="24" height="24" />
												<path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" fill="#000000" opacity="0.3" />
												<path d="M10.782158,17.5100514 L15.1856088,14.5000448 C15.4135806,14.3442132 15.4720618,14.0330791 15.3162302,13.8051073 C15.2814587,13.7542388 15.2375842,13.7102355 15.1868178,13.6753149 L10.783367,10.6463273 C10.5558531,10.489828 10.2445489,10.5473967 10.0880496,10.7749107 C10.0307022,10.8582806 10,10.9570884 10,11.0582777 L10,17.097272 C10,17.3734143 10.2238576,17.597272 10.5,17.597272 C10.6006894,17.597272 10.699033,17.566872 10.782158,17.5100514 Z" fill="#000000" />
											</g>
										</svg>
										<!--end::Svg Icon-->
									</span>
								</span>
							</div>
							<!--end::Left-->
							<!--begin::Right-->
							<div class="d-flex align-items-center justify-content-end text-right my-2">
								<div class="dropdown" data-toggle="tooltip" title="Settings">
									<span class="btn btn-default btn-icon btn-sm" data-toggle="dropdown">
										<i class="flaticon-cogwheel-2 icon-1x"></i>
									</span>
									<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-md">
										<!--begin::Navigation-->
										<ul class="navi navi-hover py-5">
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-drop"></i>
													</span>
													<span class="navi-text">New Group</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-rocket-1"></i>
													</span>
													<span class="navi-text">Groups</span>
													<span class="navi-link-badge">
														<span class="label label-light-primary label-inline font-weight-bold">new</span>
													</span>
												</a>
											</li>
											<li class="navi-item">
												<a href="javascript:void(0);" class="navi-link">
													<span class="navi-icon">
														<i class="flaticon2-gear"></i>
													</span>
													<span class="navi-text">Settings</span>
												</a>
											</li>
										</ul>
										<!--end::Navigation-->
									</div>
								</div>
							</div>
							<!--end::Right-->
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body p-0">
							<!--begin::Header-->
							<div class="d-flex align-items-center justify-content-between flex-wrap card-spacer-x py-5">
								<!--begin::Title-->
								<div class="d-flex align-items-center mr-2 py-2">
									<div class="input-icon input-icon-right ">
										<input type="text" class="form-control font-weight-bold form-control-sm font-size-h4 " 
											ng-class="{'input-view':!detail.editingTitle, 'input-editing':detail.editingTitle}" 
											ng-model="detail.title"
											ng-focus="detail.editingTitle=true"
											ng-click="$event.stopPropagation();"
												/>
										<span ng-class="{'hide':!detail.editingTitle}">
											<i class="fas fa-check icon-xs cursor-pointer" ng-click="saveNoteTitle()"></i>
											<i class="fas fa-times icon-xs ml-4 mr-8 cursor-pointer" ng-click="cancelNoteTitle();"></i>
										</span>
									</div>
									<span class="label label-light-primary font-weight-bold label-inline mr-2">inbox</span>
									<span class="label label-light-danger font-weight-bold label-inline">important</span>
								</div>
								<!--end::Title-->
								<!--begin::Toolbar-->
								<div class="d-flex py-2">
									<span class="btn btn-clean btn-sm btn-icon mr-2" data-toggle="tooltip" data-placement="top" title="Star">
										<i class="flaticon-star icon-1x"></i>
									</span>
									<span class="btn btn-clean btn-sm btn-icon mr-2" data-toggle="tooltip" data-placement="top" title="Mark as important">
										<i class="flaticon-add-label-button icon-1x"></i>
									</span>
									<span class="btn btn-default btn-sm btn-icon mr-2">
										<i class="flaticon2-sort"></i>
									</span>
								</div>
								<!--end::Toolbar-->
							</div>
							<!--end::Header-->
							<!--begin::Messages-->
							<div class="mb-3">
								<div class="cursor-pointer toggle-on font-size-h5 ql-snow  ">
									
									<!--begin::edit-->
									<div id="note-edit" class="card-spacer-x py-3 " >
                                        <textarea id="markdown-editor" name="content" data-iconlibrary="fa" rows="16">{{detail.message}}</textarea>
                                    
										<!--
                                        <ng-quill-editor ng-model="detail.message">
											<ng-quill-toolbar>
												<div>
													<span class="ql-formats">
														<select class="ql-size ql-picker" ng-attr-title="{{'Aligment'}}">
															<option value="small"></option>
															<option value="normal" selected></option>
															<option value="large" ></option>
															<option value="huge"></option>
														</select>
													</span>
													<span class="ql-formats">
														<button class="ql-bold" ng-attr-title="{{'Bold'}}"></button>
														<button class="ql-italic" ng-attr-title="{{'italic'}}"></button>
														<button class="ql-underline" ng-attr-title="{{'underline'}}"></button>
														<button class="ql-strike" ng-attr-title="{{'strike'}}"></button>
													</span>
													<span class="ql-formats">
														<button class="ql-blockquote" ng-attr-title="{{'blockquote'}}"></button>
														<button class="ql-code-block" ng-attr-title="{{'code-block'}}"></button>
													</span>
													<span class="ql-formats">
														<button class="ql-list" ng-attr-title="{{'ordered'}}" value="ordered">
															<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line> <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line> <path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path> <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path> <path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path> </svg>
														</button>
														<button class="ql-list" ng-attr-title="{{'bullet'}}" value="bullet">
																<svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line> <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line> <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line> <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line> </svg>
														</button>
													</span>
													<span class="ql-formats">
														<button class="ql-link" ng-attr-title="{{'link'}}"></button>
														<button class="ql-image" ng-attr-title="{{'image'}}"></button>
													</span>
													<span class="ql-formats">
														<button class="ql-clean" ng-attr-title="{{'clean'}}"></button>
													</span>
												</div>
											</ng-quill-toolbar>
										</ng-quill-editor>
                                            -->
										<div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 " ng-class="{'hide':detail.editingDesc}" >
											<!--begin::Actions-->
											<div class="d-flex align-items-center mr-3">
												<!--begin::Send-->
												<div class="btn-group mr-4">
													<span class="btn btn-primary font-weight-bold px-6" id="note-edit-save" ng-click="saveNoteMsg()">Save</span>
												</div>
												<!--end::Send-->
												<!--begin::Other-->
												<span class="btn btn-icon btn-sm btn-clean mr-2 dz-clickable" id="note-edit-cancel" ng-click="cancelNoteMsg()">
													<i class="flaticon2-cross"></i>
												</span>
												<!--end::Other-->
											</div>
											<!--end::Actions-->
										</div>
									</div>
								</div>
							</div>
							<!--end::Messages-->
						</div>
						<!--end::Body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::View-->
			</div>
			<!--end::Inbox-->
			<!--begin::Compose-->
			<div class="modal modal-sticky modal-sticky-lg modal-sticky-bottom-right" id="kt_inbox_compose" role="dialog" data-backdrop="false">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<!--begin::Form-->
						<form id="kt_inbox_compose_form">
							<!--begin::Header-->
							<div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 border-bottom">
								<h5 class="font-weight-bold m-0">Compose</h5>
								<div class="d-flex ml-2">
									<span class="btn btn-clean btn-sm btn-icon mr-2">
										<i class="flaticon2-arrow-1 icon-1x"></i>
									</span>
									<span class="btn btn-clean btn-sm btn-icon" data-dismiss="modal">
										<i class="ki ki-close icon-1x"></i>
									</span>
								</div>
							</div>
							<!--end::Header-->
							<!--begin::Body-->
							<div class="d-block">
								<!--begin::To-->
								<div class="d-flex align-items-center border-bottom inbox-to px-8 min-h-45px">
									<div class="text-dark-50 w-75px">To:</div>
									<div class="d-flex align-items-center flex-grow-1">
										<input type="text" class="form-control border-0" name="compose_to" value="Chris Muller, Lina Nilson" />
									</div>
									<div class="ml-2">
										<span class="text-muted font-weight-bold cursor-pointer text-hover-primary mr-2" data-inbox="cc-show">Cc</span>
										<span class="text-muted font-weight-bold cursor-pointer text-hover-primary" data-inbox="bcc-show">Bcc</span>
									</div>
								</div>
								<!--end::To-->
								<!--begin::CC-->
								<div class="d-none align-items-center border-bottom inbox-to-cc pl-8 pr-5 min-h-45px">
									<div class="text-dark-50 w-75px">Cc:</div>
									<div class="flex-grow-1">
										<input type="text" class="form-control border-0" name="compose_cc" value="" />
									</div>
									<span class="btn btn-clean btn-xs btn-icon" data-inbox="cc-hide">
										<i class="la la-close"></i>
									</span>
								</div>
								<!--end::CC-->
								<!--begin::BCC-->
								<div class="d-none align-items-center border-bottom inbox-to-bcc pl-8 pr-5 min-h-45px">
									<div class="text-dark-50 w-75px">Bcc:</div>
									<div class="flex-grow-1">
										<input type="text" class="form-control border-0" name="compose_bcc" value="" />
									</div>
									<span class="btn btn-clean btn-xs btn-icon" data-inbox="bcc-hide">
										<i class="la la-close"></i>
									</span>
								</div>
								<!--end::BCC-->
								<!--begin::Subject-->
								<div class="border-bottom">
									<input class="form-control border-0 px-8 min-h-45px" name="compose_subject" placeholder="Subject" />
								</div>
								<!--end::Subject-->
								<!--begin::Message-->
								<div id="kt_inbox_compose_editor" class="border-0" style="height: 250px"></div>
								<!--end::Message-->
								<!--begin::Attachments-->
								<div class="dropzone dropzone-multi px-8 py-4" id="kt_inbox_compose_attachments">
									<div class="dropzone-items">
										<div class="dropzone-item" style="display:none">
											<div class="dropzone-file">
												<div class="dropzone-filename" title="some_image_file_name.jpg">
													<span data-dz-name="">some_image_file_name.jpg</span>
													<strong>(
													<span data-dz-size="">340kb</span>)</strong>
												</div>
												<div class="dropzone-error" data-dz-errormessage=""></div>
											</div>
											<div class="dropzone-progress">
												<div class="progress">
													<div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
												</div>
											</div>
											<div class="dropzone-toolbar">
												<span class="dropzone-delete" data-dz-remove="">
													<i class="flaticon2-cross"></i>
												</span>
											</div>
										</div>
									</div>
								</div>
								<!--end::Attachments-->
							</div>
							<!--end::Body-->
							<!--begin::Footer-->
							<div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 border-top">
								<!--begin::Actions-->
								<div class="d-flex align-items-center mr-3">
									<!--begin::Send-->
									<div class="btn-group mr-4">
										<span class="btn btn-primary font-weight-bold px-6">Send</span>
										<span class="btn btn-primary font-weight-bold dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="button"></span>
										<div class="dropdown-menu dropdown-menu-sm dropup p-0 m-0 dropdown-menu-right">
											<ul class="navi py-3">
												<li class="navi-item">
													<a href="javascript:void(0);" class="navi-link">
														<span class="navi-icon">
															<i class="flaticon2-writing"></i>
														</span>
														<span class="navi-text">Schedule Send</span>
													</a>
												</li>
												<li class="navi-item">
													<a href="javascript:void(0);" class="navi-link">
														<span class="navi-icon">
															<i class="flaticon2-medical-records"></i>
														</span>
														<span class="navi-text">Save &amp; archive</span>
													</a>
												</li>
												<li class="navi-item">
													<a href="javascript:void(0);" class="navi-link">
														<span class="navi-icon">
															<i class="flaticon2-hourglass-1"></i>
														</span>
														<span class="navi-text">Cancel</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
									<!--end::Send-->
									<!--begin::Other-->
									<span class="btn btn-icon btn-sm btn-clean mr-2" id="kt_inbox_compose_attachments_select">
										<i class="flaticon2-clip-symbol"></i>
									</span>
									<span class="btn btn-icon btn-sm btn-clean">
										<i class="flaticon2-pin"></i>
									</span>
									<!--end::Other-->
								</div>
								<!--end::Actions-->
								<!--begin::Toolbar-->
								<div class="d-flex align-items-center">
									<span class="btn btn-icon btn-sm btn-clean mr-2" data-toggle="tooltip" title="More actions">
										<i class="flaticon2-settings"></i>
									</span>
									<span class="btn btn-icon btn-sm btn-clean" data-inbox="dismiss" data-toggle="tooltip" title="Dismiss reply">
										<i class="flaticon2-rubbish-bin-delete-button"></i>
									</span>
								</div>
								<!--end::Toolbar-->
							</div>
							<!--end::Footer-->
						</form>
						<!--end::Form-->
					</div>
				</div>
			</div>
			<!--end::Compose-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Entry-->